{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<!-- Copyright 2021 The LUCI Authors. All rights reserved.
Use of this source code is governed under the Apache License, Version 2.0
that can be found in the LICENSE file. -->
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <link rel="icon" type="image/png" href="/static/images/cv.png">
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <title>{{block "title" .}}default{{end}}</title>
  {{.AnalyticsSnippet}}
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
    }
    a {
      text-decoration: none!important;
    }
  </style>
  {{block "head" .}}{{end}}
</head>

<body>
  <div class="container">
  <div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-brand"><a href="/">LUCI Change Verifier</a></div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            {{if .IsAnonymous}}
              <li><a class="nav-link" href="{{.LoginURL}}">Login</a></li>
            {{else}}
              <li><p class="navbar-text">{{.User.Email}}</p></li>
              <li> <a class="nav-link" href="{{.LogoutURL}}">Logout</a></li>
            {{end}}
        </ul>
      </div>
    </div>
  </div>
    <div id="content-box">
      {{block "content" .}}{{end}}
    </div>

    <footer style="color: #cccccc;">
      <hr>
      <div class="row">
        <div class="col-md-6">
        <p>
            Handled in {{call .HandlerDuration}}
        </p>
        <p>
            Version: {{.AppVersion}}
        </p>
      </div>
      <div class="col-md-6 text-right">
        <a target="_blank" href="https://bugs.chromium.org/p/chromium/issues/entry?summary=CV+UI+Issue+%3Cdescribe%3E&amp;description=screenshot%2C+url+and+description+of+the+issue&amp;components=Infra%3ELUCI%3EBuildService%3EPreSubmit%3ECQ&amp;labels=Type-Bug%2CPri-2">
          <img src="https://storage.cloud.google.com/chops-feedback/icon.png" alt="feedback link"> Feedback
        </a>
        </div>
      </div>
    </footer>
  </div>
  <script src="/static/jquery/jquery.min.js"></script>
  <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  <script>
  $("td.unix-timestamp, span.unix-timestamp, dd.unix-timestamp").each(function (index, elem) {
    var options = {
      year: "numeric", month: "numeric", day: "numeric", hour: "numeric",
      minute: "numeric", second: "numeric", timeZoneName:"short",
      hour12: false,
    };
    if (elem.innerHTML != "") {
      time = new Date(elem.innerHTML * 1000);
      if (time instanceof Date && !isNaN(time)) {
        elem.innerHTML = time.toLocaleDateString(undefined, options)
      }
    }
  })
  </script>
</body>
</html>
{{end}}
